<template>
  <div class='app-container'>
    <div ref="graphContainer" class="parent-wrapper">
      <a-button type="primary" style="position: absolute; top: 15px; left: 20px;" @click="createGraph">创建组</a-button>
    </div>
  </div>
</template>

<script>
import mxgraph from '@utils/init.js';

export default {
  name: '',
  module_index: 500,
  module_name: '锚点/连接点(×)',
  data() {
    return {
      graph: null,
      parent: null,
      num: 0,
      // 构造一个事件处理程序，该处理程序使用橡皮筋选择来选择图中的矩形区域。
      rubberBand: null
    };
  },
  created() { },
  mounted() {
    this.initRubber();
    this.init();
    this.initConstraints();
  },
  methods: {
    init() {
      // 创建全局容器
      this.graph = new mxGraph(this.$refs.graphContainer);
      // 创建全局父元素
      this.parent = this.graph.getDefaultParent();
      // 禁用默认上下文
      mxEvent.disableContextMenu(this.$refs.graphContainer);
    },
    createGraph() {
      ++this.num;
      var v1 = this.graph.insertVertex(this.parent,'Hello','Hello',Number(((this.num) + Math.random() * 1080).toFixed(2)),Number(((this.num) + Math.random() * 570).toFixed(2)),80,30);
      ++this.num;
      var v2 = this.graph.insertVertex(this.parent,'World','World',Number(((this.num) + Math.random() * 1080).toFixed(2)),Number(((this.num) + Math.random() * 570).toFixed(2)),80,30);
      ++this.num;
      var v3 = this.graph.insertVertex(this.parent,'everyBody!','everyBody!',Number(((this.num) + Math.random() * 1080).toFixed(2)),Number(((this.num) + Math.random() * 570).toFixed(2)),60,60);
      this.graph.insertEdge(v1,'v1-v2','',v1,v2);
      this.graph.insertEdge(v2,'v2-v3','',v2,v3,'edgeStyle=orthogonalEdgeStyle;');
      this.graph.insertEdge(v3,'v3-v1','',v3,v1);
    },
    initRubber() {
      this.rubberBand = new mxRubberband(this.graph)
    },
    // 创建锚点
    initConstraints() {
      console.log(mxShape)
      // 覆盖以定义每个形状的连接点
      mxGraph.prototype.getAllConnectionConstraints = function (terminal,source) {
        if (terminal != null && terminal.shape != null) {
          if (terminal.shape.stencil != null) {
            if (terminal.shape.stencil.constraints != null) {
              return terminal.shape.stencil.constraints;
            }
          }
          else if (terminal.shape.constraints != null) {
            return terminal.shape.constraints;
          }
        }

        return null;
      };

      // 定义所有形状的默认约束
      // constraints：保存在形状中定义的mxConnectionConstraints数组。
      mxShape.prototype.constraints = [
        new mxConnectionConstraint(new mxPoint(0.25,0),true),
        new mxConnectionConstraint(new mxPoint(0.5,0),true),
        new mxConnectionConstraint(new mxPoint(0.75,0),true),
        new mxConnectionConstraint(new mxPoint(0,0.25),true),
        new mxConnectionConstraint(new mxPoint(0,0.5),true),
        new mxConnectionConstraint(new mxPoint(0,0.75),true),
        new mxConnectionConstraint(new mxPoint(1,0.25),true),
        new mxConnectionConstraint(new mxPoint(1,0.5),true),
        new mxConnectionConstraint(new mxPoint(1,0.75),true),
        new mxConnectionConstraint(new mxPoint(0.25,1),true),
        new mxConnectionConstraint(new mxPoint(0.5,1),true),
        new mxConnectionConstraint(new mxPoint(0.75,1),true)];

      // 边没有连接点
      mxPolyline.prototype.constraints = null;
    }
  }
};
</script>

<style>
</style>